<template>
  <div class="DetailContainer">
    <!-- 头部 -->
    <div class="header">
      <!-- 网站标签 -->
      <div class="iconContainer">
        <img
          src="//i.zhenai.com/pc/portal/user/index/images/logo.c18c8ac.png"
          alt=""
        />
      </div>
    </div>

    <!-- 详情 -->
    <!-- 最外层容器 -->
    <div class="detailOutSide">
      <div class="detailInner">
        <!-- 详情左侧 -->
        <div class="detail-left">
          <div class="left-header">
            <!-- 头像块 -->
            <div class="left-via">
              <!-- 头像左边 -->
              <div class="viaImg">
                <img :src="userInfo.avatarURL" alt="" />
              </div>
              <!-- 头像右边 -->
              <div class="viaTitleContainer">
                <!-- 头像右上-->
                <div class="viaTitle">
                  <!-- 右上第一行 -->
                  <div class="viaTitle-one">
                    <h1 class="name">{{ userInfo.nickname }}</h1>
                    <div class="iconContainer">
                      <div
                        style="color: gold"
                        class="iconfont iconhuangguanguanjun2x"
                      ></div>
                      <div style="color: gold" class="iconfont iconxing1"></div>
                      <div
                        style="color: green"
                        class="iconfont iconcredentials_icon"
                      ></div>
                    </div>
                    <el-button class="viaTitleCare" @click="fol"
                      >关注</el-button
                    >
                  </div>
                  <!-- 右上第二行 -->
                  <div class="viaTitle-two">ID：{{ userInfo.objectID }}</div>
                </div>
                <!-- 右下块 -->
                <div class="imgBanner">
                  <div class="arrows iconfont iconangle-left"></div>
                  <div class="ImgCtn">
                    <img
                      v-for="photo in userInfo.photoList"
                      :key="photo"
                      class="imgBannerImg"
                      :src="photo"
                      alt=""
                    />
                  </div>
                  <div class="arrows iconfont iconangle-right"></div>
                </div>
              </div>
            </div>

            <!-- 头像下面一块 -->
            <div class="msgContainer">
              <div class="msg">
                <div class="msgIconContainer">
                  <div style="color: red" class="iconfont iconHI"></div>
                  <div class="say">打招呼</div>
                </div>
              </div>

              <div class="msg">
                <div class="msgIconContainer">
                  <div style="color: red" class="iconfont iconHI"></div>
                  <div class="say">发消息</div>
                </div>
              </div>

              <div class="msg">
                <div class="msgIconContainer">
                  <div style="color: red" class="iconfont iconHI"></div>
                  <div class="say">红娘牵线</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 左边下：详情介绍模块 -->
          <div class="userInfoDetail">
            <div class="userInfoContainer">
              <!-- 内心独白 -->
              <div class="heart">
                <div class="userInfoTitle">内心独白</div>
                <span>{{ userInfo.introduceContent }}</span>
              </div>
              <!-- 个人资料 -->
              <div class="userInfo">
                <div class="userInfoTitle">个人资料</div>
                <!-- 按键容器 -->
                <div class="userInfoBtnContainer">
                  <div
                    v-for="user in userInfo.basicInfo"
                    :key="user"
                    class="userBtn one"
                  >
                    {{ user }}
                  </div>
                </div>

                <div class="userInfoBtnContainer">
                  <div
                    v-for="detail in userInfo.detailInfo"
                    :key="detail"
                    class="userBtn two"
                  >
                    {{ detail }}
                  </div>
                </div>
              </div>
              <!-- 兴趣爱好 -->
              <div class="hobby">
                <div class="userInfoTitle">兴趣爱好</div>
                <span v-for="hobby in userInfo.hobby" :key="hobby">{{
                  hobby
                }}</span>
              </div>

              <!-- 择偶条件 -->
              <div class="term">
                <div class="userInfoTitle">择偶条件</div>

                <div class="userInfoBtnContainer">
                  <div
                    v-for="needType in userInfo.objectInfo"
                    :key="needType"
                    class="userBtn three"
                  >
                    {{ needType }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右边猜你喜欢 -->
      <div class="like">
        <div class="guessLikeContainer">
          <p>猜你喜欢</p>
          <div class="trade">
            <div style="color: gold" class="tradeIcon iconfont iconxing1"></div>
            <p>换一组</p>
          </div>
        </div>

        <div class="tradeUser">
          <div class="ImgContainer">
            <img
              src="https://photo.zastatic.com/images/photo/463922/1855684997/44701748690645891.png?scrop=1&crop=1&cpos=north&w=100&h=100"
              alt=""
            />
          </div>

          <div class="userText">
            <div class="userTextTitle">
              <div class="userTextName">需要氧气</div>
              <div
                style="color: gold"
                class="icon iconfont iconhuangguanguanjun2x"
              ></div>
            </div>

            <p class="attr">37岁&nbsp;&nbsp;&nbsp;168cm</p>

            <p class="des">身高170体重110,长年健身,希望你也...</p>
          </div>
        </div>

        <div class="tradeUser">
          <div class="ImgContainer">
            <img
              src="https://photo.zastatic.com/images/photo/445436/1781740772/28349523244226210.png?scrop=1&crop=1&cpos=north&w=100&h=100"
              alt=""
            />
          </div>

          <div class="userText">
            <div class="userTextTitle">
              <div class="userTextName">咕呱</div>
              <div
                style="color: gold"
                class="icon iconfont iconhuangguanguanjun2x"
              ></div>
            </div>

            <p class="attr">37岁&nbsp;&nbsp;&nbsp;168cm</p>

            <p class="des">身高170体重110,长年健身,希望你也...</p>
          </div>
        </div>

        <div class="tradeUser">
          <div class="ImgContainer">
            <img
              src="https://photo.zastatic.com/images/photo/429452/1717807070/16695048193950688.png?scrop=1&crop=1&cpos=north&w=100&h=100"
              alt=""
            />
          </div>

          <div class="userText">
            <div class="userTextTitle">
              <div class="userTextName">小九</div>
              <div
                style="color: gold"
                class="icon iconfont iconhuangguanguanjun2x"
              ></div>
            </div>

            <p class="attr">37岁&nbsp;&nbsp;&nbsp;168cm</p>

            <p class="des">身高170体重110,长年健身,希望你也...</p>
          </div>
        </div>
      </div>
    </div>
    <Footer v-if="!$route.meta.isHideFooter" />
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Detail",
  data() {
    return {
      userId: null,
      userInfo: {},
    };
  },
  computed: {
    ...mapState({
      conditionList: (state) => state.search.conditionList,
      userData: (state) => state.search.userData,
    }),
  },
  methods: {
    fol() {
      let id = this.userData.map((item) => {
        return item.objectID;
      });
      //判断是否重复关注
      if (id.indexOf(this.userId) === -1) {
        this.$router.push({
          name: "Follow",
          query: {
            userId: this.userId,
          },
        });
      }
    },
  },
  mounted() {
    // console.log(this.$route)
    const { userId } = this.$route.query;
    // console.log(userId);
    this.userId = userId * 1;
    // 获取总数据，选出对应下标的数据进行展示
    this.userInfo = this.conditionList.list.find((item) => {
      // 因为传过来的ID是变成了字符串，但是数据里是数字，所以要转数字
      return item.objectID == userId;
    });
    //console.log(this.userInfo);
    //console.log(this.userId);
  },
};
</script>

<style lang="stylus" scoped>
.DetailContainer {
  position: relative;

  .header {
    background-color: #a187f9;
    width: 100%;
    height: 367px;
  }

  .detailOutSide {
    width: 100%;

    .detailInner {
      width: 880px;
      margin-left: 100px;

      .detail-left {
        .left-header {
          margin-top: -150px;
          border-radius: 20px;

          // border 1px solid red
          .left-via {
            display: flex;
            width: 880px;
            height: 200px;

            .viaImg {
              margin-left: 32px;
              overflow: hidden;
              background: center center no-repeat #f5f5f5;
              background-size: cover;

              img {
                border-radius: 10px;
                width: 200px;
                height: 200px;
              }
            }

            .viaTitleContainer {
              padding-left: 15px;

              .viaTitle {
                width: 635px;
                height: 90px;

                .viaTitle-one {
                  display: flex;
                  align-items: center;

                  .name {
                    font-size: 22px;
                    color: #fff;
                  }

                  .viaTitleCare {
                    background-color: #a187f9;
                    margin-left: 15px;
                    width: 100px;
                    color: pink;
                  }

                  .iconContainer {
                    display: flex;

                    div {
                      padding-left: 5px;
                      width: 20px;
                      height: 20px;
                    }
                  }
                }

                .viaTitle-two {
                  // padding-top 5px
                }
              }

              .imgBanner {
                border-radius: 10px;
                background-color: #fff;
                padding-top: 10px;
                display: flex;
                width: 635px;
                height: 100px;

                .arrows {
                  width: 30px;
                  height: 100px;
                  line-height: 100px;
                  text-align: center;
                  background-size: 14px 14px;
                  cursor: pointer;
                  opacity: 0.5;
                  transition: opacity 0.3s;
                }

                .ImgCtn {
                  .imgBannerImg {
                    width: 100px;
                    height: 100px;
                    background-color: #f5f5f5;
                    margin: 0 6px;
                    border-radius: 10px;
                  }
                }
              }
            }
          }

          .msgContainer {
            display: flex;
            align-items: center;
            height: 75px;
            line-height: 75px;
            font-size: 20px;
            color: #666;
            text-align: center;
            background: rgba(145, 110, 240, 0.07);
            margin-top: 15px;
            border-radius: 10px;

            .msg {
              border-right: 2px solid #D2D2D2;
              width: 33.33%;

              .msgIconContainer {
                height: 30px;
                line-height: 30px;
                // border 1px solid red
                display: flex;
                justify-content: center;
                align-items: center;

                .iconHI {
                  width: 30px;
                  height: 30px;
                  background: 0 0 no-repeat;
                  background-size: 100% 100%;
                  margin-right: 3px;
                }

                .say {
                  height: 24px;
                  line-height: 24px;
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
    }
  }

  .userInfoDetail {
    margin-top: 30px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #ebebeb;

    .userInfoContainer {
      padding: 30px 32px 50px;

      .heart {
        .userInfoTitle {
          border-left: 4px solid #A187F9;
          padding-left: 10px;
          font-size: 16px;
          font-weight: bold;
          color: #333;
          line-height: 22px;
        }

        span {
          display: block;
          line-height: 30px;
          padding: 10px 0 0 10px;
          font-size: 14px;
          color: #666;
        }
      }

      .userInfo {
        margin-top: 30px;
      }
    }
  }
}

.userInfoTitle {
  border-left: 4px solid #A187F9;
  padding-left: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  line-height: 22px;
  margin-top: 30px;
}

.userInfoBtnContainer {
  margin-top: 20px;

  .userBtn {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding: 0 20px;
    background: #F2F2F2;
    border-radius: 15px;
    margin-left: 10px;
    margin-top: 10px;
    font-size: 14px;
    color: #666;
  }

  .userBtn.one {
    background-color: #EAEBFF;
  }

  .userBtn.two {
    background-color: #FCF2F6;
  }
}

.hobby {
  span {
    padding-left: 15px;
    display: block;
    color: #666;
    width: 50%;
    line-height: 24px;
    margin-top: 10px;
    font-size: 14px;
  }
}

.like {
  position: absolute;
  top: 307px;
  right: 200px;
  width: 270px;
  background: #fff;
  border: 1px solid #ebebeb;
  color: #666;
  margin-bottom: 30px;
  padding: 15px 18px 26px;
  border-radius: 6px;

  .guessLikeContainer {
    height: 22px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;

    .trade {
      display: flex;
      align-items: center;

      p {
        padding-left: 5px;
        font-size: 14px;
        color: #8B76F9;
        line-height: 20px;
        cursor: pointer;
      }
    }
  }

  .tradeUser {
    display: flex;
    margin-top: 20px;

    .ImgContainer {
      img {
        width: 75px;
        height: 75px;
        border-radius: 6px;
        background: center center no-repeat;
        background-size: cover;
      }
    }

    .userText {
      width: 160px;
      margin-left: 15px;
      font-size: 12px;
      line-height: 17px;

      .userTextTitle {
        display: flex;

        .userTextName {
          font-size: 14px;
          color: #666;
          font-weight: bold;
        }

        .icon {
          width: 16px;
          height: 16px;
          padding-left: 10px;
        }
      }
    }

    .attr {
      margin-top: 4px;
      font-size: 12px;
      color: #999;
    }

    .des {
      font-size: 12px;
      color: #666;
      overflow: hidden;
      margin-top: 4px;
    }
  }
}
</style>
